<script setup>
import { ref, getCurrentInstance, onMounted } from "vue";

const { proxy } = getCurrentInstance();
const echarts = proxy.echarts;

const hist2 = ref();

onMounted(() => {
  let mychart = echarts.init(hist2.value);
  const option = {
    title: {
      text: "World Population",
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    legend: {},
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: {
      type: "value",
      boundaryGap: [0, 0.01],
    },
    yAxis: {
      type: "category",
      data: ["Brazil", "Indonesia", "USA", "India", "China", "World"],
    },
    series: [
      {
        name: "2011",
        type: "bar",
        data: [18203, 23489, 29034, 104970, 131744, 630230],
      },
      {
        name: "2012",
        type: "bar",
        data: [19325, 23438, 31000, 121594, 134141, 681807],
      },
    ],
  };
  mychart.setOption(option);
});
</script>

<template>
  <div class="container3" id="container3" ref="container3">
    <div id="hist2" ref="hist2"></div>
  </div>
</template>

<style scoped>
#container3 {
  height: 100vh;
  width: 100vw;
  color: #fff;
  text-align: center;
}
#hist2 {
  position: absolute;
  width: 100%;
  height: 100%;
}
</style>
